<template>
  <div>
    <c-r-m-list-head
      :search.sync="search"
      :crm-type="crmType"
      title="投放统计"
      @on-handle="listHeadHandle"
      @on-export="exportInfos"
      :showSearch="false"
    >
      <el-menu
        slot="icon"
        ref="elMenu"
        :default-active="crmType"
        mode="horizontal"
        active-text-color="#2362FB"
        @select="menuSelect"
      >
        <el-menu-item
          v-for="(item, index) in menuItems"
          :key="index"
          :index="item.path"
        >
          <img :src="item.icon" />
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </c-r-m-list-head>
    <div
      v-empty="!crm.putinStatistics.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <c-r-m-table-head
        ref="crmTableHead"
        :crm-type="crmType"
        @handle="handleHandle"
        @scene="handleScene"
        :searchList="{ date: datevalue_s }"
      >
        <slot name="custom">
          <div class="initTable_search">
            <span>组织：</span>
            <!-- 部门模块 -->
            <xh-structure-cell-mul
              radio
              class="xh-structure-cell"
              @valueChange="structureChangeRoi"
              type="1"
              v-if="showDept"
              v-loading="deptLoading"
              ref="structurecell"
            />
          </div>
          <div class="initTable_search" style="width: 360px">
            <span>投放平台：</span>
            <el-select
              v-model="tfvalue_s"
              placeholder="请选择搜索的平台"
              filterable
              multiple
              collapse-tags
              clearable
            >
              <el-option
                v-for="(item, index) in tfoptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="initTable_search">
            <span>课程期数：</span>
            <el-input placeholder="请输入用于搜索的课程期数" v-model="kcinput_s" clearable></el-input>
          </div> -->
          <div class="initTable_search" style="width: 360px">
            <span>大类：</span>
            <el-select
              v-model="tfvalue_ses"
              placeholder="请选择搜索的大类"
              filterable
              clearable
              multiple
              collapse-tags
            >
              <el-option
                v-for="(item, index) in tfoptionses"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <div class="initTable_search">
            <span>表单录入时间：</span>
            <el-date-picker
              v-model="datevalue_s"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <el-button
            type="primary"
            class="filter-button"
            icon="wk wk-screening"
            @click="searchTable"
            >搜索</el-button
          >
        </slot>
      </c-r-m-table-head>
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        row-key="`${crmType}Id`"
        class="n-table--border"
        use-virtual
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          reserve-selection
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index == 0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          sortable="custom"
          show-overflow-tooltip
        />
        <el-table-column />

        <!-- <el-table-column :resizable="false" fixed="right" width="40">
          <template slot="header" slot-scope="slot">
            <field-set :crm-type="crmType" @change="setSave" />
          </template>
        </el-table-column> -->
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

        <ul class="arrROI">
          <li v-for="(item, index) in putinStatisticsArr" :key="index">
            {{ item.label }}：{{ putinStatisticsData[item.val] }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import TableMixin from "@/views/crm/mixins/Table";
import request from "@/utils/request";
import XhStructureCellMul from "@/components/CreateCom/XhStructureCellMul";
export default {
  name: "putinStatisticsIndex",
  components: {
    XhStructureCellMul,
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: "putinStatistics",
      createShow: false,
      tfvalue_s: "", //搜索平台
      tfvalue_ses: "", //大类
      tfoptionses: ["电商美工", "手绘插画", "影视后期"],
      kcinput_s: "", //搜索课程期数
      datevalue_s: "", //搜索投放日期

      // crmRoiSearchBO: {}, //搜索
      tfoptions: [],
      roiPutinStatisticsData: null,
      putinStatisticsData: {
        sjdqdRoi: "0",
        sjdsjRoi: "0",
        allqdRoi: "0",
        allsjRoi: "0",
        bdsjRoi: "0",
        bdzmRoi: "0",
        cjkhRoi: "0",
        cjhtRoi: "0",
        sjdqdRoi2: "0",
        sjdsjRoi2: "0",
        allqdRoi2: "0",
        allsjRoi2: "0",
        bdsjRoi2: "0",
        bdzmRoi2: "0",
        cjkhRoi2: "0",
        cjhtRoi2: "0",
      },
      putinStatisticsArr: [
        { label: "实际回款/渠道消耗ROI", val: "sjdqdRoi" },
        { label: "实际回款/实际消耗ROI", val: "sjdsjRoi" },
        { label: "回款/渠道消耗ROI", val: "allqdRoi" },
        { label: "回款/实际消耗ROI", val: "allsjRoi" },
        { label: "实际合同/渠道消耗金额ROI", val: "bdsjRoi" },
        { label: "实际合同/实际消耗金额ROI", val: "bdzmRoi" },
        { label: "合同/渠道消耗金额ROI", val: "cjkhRoi" },
        { label: "合同/实际消耗金额ROI", val: "cjhtRoi" },
        { label: "年实际回款/渠道消耗ROI", val: "sjdqdRoi2" },
        { label: "年实际回款/实际消耗ROI", val: "sjdsjRoi2" },
        { label: "年回款/渠道消耗ROI", val: "allqdRoi2" },
        { label: "年回款/实际消耗ROI", val: "allsjRoi2" },
        { label: "年实际合同/渠道消耗金额ROI", val: "bdsjRoi2" },
        { label: "年实际合同/实际消耗金额ROI", val: "bdzmRoi2" },
        { label: "年合同/渠道消耗金额ROI", val: "cjkhRoi2" },
        { label: "年合同/实际消耗金额ROI", val: "cjhtRoi2" },
      ],
      showDept: true,
      deptLoading: false,
      deptIds_s: [], //部门组件
    };
  },
  computed: {
    menuItems() {
      const temp = [];
      if (this.crm && this.crm.roiMoney) {
        temp.push({
          title: "投放金额",
          path: "roiMoney",
          icon: require("@/assets/img/crm/roiMoney.png"),
        });
      }

      if (this.crm && this.crm.putinStatistics) {
        temp.push({
          title: "投放统计",
          path: "putinStatistics",
          icon: require("@/assets/img/crm/roiMoney.png"),
        });
      }
      return temp;
    },
  },
  mounted() {
    // this.queryPutinStatisticsData();
  },
  deactivated: function () {
    if (this.$refs.elMenu) {
      this.$refs.elMenu.activeIndex = this.crmType;
    }
  },
  methods: {
    // queryPutinStatisticsData() {
    //   request({
    //     url: "crmPutinStatistics/querySumRoi",
    //     method: "post",
    //     data: {},
    //     headers: {
    //       "Content-Type": "application/json;charset=UTF-8",
    //     },
    //   }).then((res) => {
    //     const obj = res.data.extraData;
    //     Object.keys(this.putinStatisticsData).forEach((key) => {
    //       this.putinStatisticsData[key] = obj[key] ||  this.putinStatisticsData[key];
    //     });
    //   });
    // },
    /**
     * 左侧菜单选择
     */
    menuSelect(key, keyPath) {
      this.$emit("menu-select", key, keyPath);
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "=RoiName") {
        return "can-visit--underline";
      } else {
        return "";
      }
    },
    //部门选择器
    structureChangeRoi(e) {
      console.log(e)
      if (e.value.length > 0) {
        this.deptIds_s = e.value;
      } else {
        this.deptIds_s = [];
      }
    },
  },
  created() {
    // crmPutinMoneySourceAPI.then(res=>{

    // })
    request({
      url: "crmPutinMoney/querySource",
      method: "post",
      data: {},
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
    }).then((res) => {
      this.tfoptions = res.data; //平台
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/crm/styles/table.scss";

/deep/.table-option-view {
  display: none !important;
}

.initTable_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20px;
  padding: 0 10px;

  span {
    white-space: nowrap;
  }
  .el-select {
    width: 80%;
  }
}
.p-contianer {
  height: fit-content;
}
.arrROI {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 20px;
  li {
    width: 20%;
    margin: 0 20px 5px;
    color: #99a9bf;
  }
}

/deep/ .el-table{
  margin-top: 40px;
}
/deep/ .block_reshow{
  left: -3vw !important;
}
</style>
